(function() {
	var index = {

		initialize: function() {

			//第一次运行的逻辑：如果拿不到缓存，就设置一个数据，然后渲染出这个数据，
			this.outputBtn = $('#outputBtn');
			if(localStorage.getItem("photoNameList")) {
				this.photoName = JSON.parse(localStorage.getItem("photoNameList"));
				console.log(this.photoName);
				this.colSum = this.photoName.length;
			} else {
				this.photoName = [{
					namelist: ["陈文希","陈文乐","光头强","熊大","喜羊羊","灰太狼"],
					moveLeft: 60
				}];
			}

			if(localStorage.getItem("photoCommonArg")) {
				this.commonArg = JSON.parse(localStorage.getItem("photoCommonArg"));
				console.log(this.commonArg);
			} else {
				this.commonArg = {
					colInterval: 10, //列间隔
					fontSize: 16, //字体大小
					fontWeight:550,     //字体粗细
					nameInterval: 10, //名字间隔
					mainTop: 200
				}
			}

			this.onShow();
		},

		onShow: function() {
			this.render();
			this.bindEvent();
			String.prototype.trim=function(){
　　    			return this.replace(/(^\s*)|(\s*$)/g, "");
　　			}
		},

		//绑定事件
		bindEvent: function() {
			var that = this;
			this.outputBtn.on('click', function() {
				that.goOutinput();
			});
			this.inputArea.on('click','.deleBtn' , function(e) {
				that.deleteFn(e);
			});
			this.inputArea.on('click','.toggleDirection',function(e){
				that.toggleDirectionFn(e);
			});
			this.addBtn.on('click',function(){
				that.addFn();
			});
		},

		//渲染生成列表
		render: function() {
			var html = $('#moreColTpl').html();
			var fn = _.template(html);
			var coltpl = fn({
				result: this.photoName
			});
			$('#inputArea').html(coltpl);

			$('#colInterval').val(this.commonArg.colInterval);
			$('#fontSize').val(this.commonArg.fontSize);
			$('#fontWeight').val(this.commonArg.fontWeight);
			$('#nameInterval').val(this.commonArg.nameInterval);
			$('#mainTop').val(this.commonArg.mainTop);
			
			this.inputArea = $('#inputArea');
			this.deleBtn = $('.deleBtn');
			this.addBtn = $("#addColBtn");
		},

		//点击生成
		goOutinput: function() {
			this.setLocalStrage();
			window.location.href = "html/photoOutput.html";
		},

		//存入数据
		setLocalStrage: function() {
			//存入名字数据
			var colList = $('.colList'),
				colArray = [];
			for(var i = 0; i < colList.length; i++) {
				var item = $(colList[i]);
				var obj = {};
				var namelist = item.find('textarea').val().trim().split('，');  //中文的逗号
				var moveLeft = item.find('.colLeftMove').val();
				obj.namelist = namelist;
				obj.moveLeft = moveLeft;
				colArray.push(obj);
			}
			this.photoName = JSON.stringify(colArray);
			localStorage.setItem("photoNameList", this.photoName);

			//存入公共参数
			var colInterval = $('#colInterval').val()
			var fontSize = $('#fontSize').val()
			var fontWeight = $('#fontWeight').val()
			var nameInterval = $('#nameInterval').val()
			var mainTop = $('#mainTop').val()

			this.commonArg = JSON.stringify({
				colInterval: colInterval, //列间隔
				fontSize: fontSize, //字体大小
				fontWeight:fontWeight,      //字体粗细
				nameInterval: nameInterval, //名字间隔
				mainTop: mainTop //整体上方
			});
			localStorage.setItem("photoCommonArg", this.commonArg);
		},

		//点击删除按钮
		deleteFn: function(e) {
			var target = $(e.currentTarget).parent();
			var index = target.index();
			//这里对象中可以不删除
			Array.prototype.del = function(index) {
				if(isNaN(index) || index >= this.length) {
					return false;
				}
				for(var i = 0, n = 0; i < this.length; i++) {
					if(this[i] != this[index]) {
						this[n++] = this[i];
					}
				}
				this.length -= 1;
			};
			this.photoName.del(index);
			console.log(this.photoName);
			target.remove();
		},
		
		toggleDirectionFn:function(e){
			var target = $(e.target);
			var textArea =  target.parent().find('textarea');
			var nameList = textArea.val().trim().split('，');
			var str = "";
			for(var i=nameList.length-1;i>=0;i--){
				str +=nameList[i];
				if(i!=0){
					str+="，";
				}
			}
			textArea.val(str);
			
		},
		
		//新增一列
		addFn:function(){
			var length = this.photoName.length;
			var html = $("#singleColTpl").html();
			var fn = _.template(html);
			var tpl = fn({item:length});
			$("#inputArea ul").append(tpl);
			
			this.deleBtn = $('.deleBtn');
		}

	}
	index.initialize();

})();

/*

逻辑操作:

1.读取缓存:
    读取名字列表和公共参数
2.渲染
    名字列表+模板渲染生成名字列表,公共参数渲染
3.交互
  3.1.点击生成
  	收集数据
  	lis.length
  	for(lis.length
  		var obj = {};
  		var namelist = lis[i].find.textarea.val().split(',');
  		var moveLeft = lis[i].find.moveleft.val();
  		obj.namelist = namelist;
  		obj.moveLeft = moveLeft;
  		push(obj);
  3.2.点击删除按钮
  	获取index,从名字列表数组中删除对应index的对象
  	remove DOM对象
  3.3.点击新增一列
  	获取index+1
  	生成tpl
  	appendChild(tpl);
  	var obj = {namelist:[],moveleft:0}
  	push(obj);
  	
-----------------

大视图 : 增加一列按钮/列间隔/字体大小/名字间隔

小视图: 第几列/名字框/左移动多少/删除按钮

数据结构:
1.名字列表:
[
    {
    	namelist:["A","b"],
    	moveLeft:20
    },{
    	namelist:["v","mike"],
    	moveLeft:10
    }
]
2.公共参数:
{
	colInterval:10,    //列间隔
	fontSize:16,       //字体大小
	nameInterval:10    //名字间隔
}

*/